<template>
	<view class="page" :class="getThemeClass">
		<unavbar :isback="true" title="" class="my-nav-ber-a-box mallunavbar"></unavbar>
		
		<view class="image-container">
			<view class="progress" v-if="loadingProgress<100 && isUndone == false">
				<view class="progress-text">正在生成中<text>{{loadingProgress}}%</text></view>
				<view class="progress-bg">
					<view class="progress-bar" :style="'width: ' + loadingProgress + '%'"></view>
				</view>
							</view>
			<view class="progress-un" v-if="isUndone">
				<view><u-icon name="close-circle" size="40" color="#ffffff"></u-icon></view>
				<view class="progress-text">已撤销</view>
				<view>积分已退还</view>
			</view>
		    
		    <img class="responsive-image" :src="imageSrc" style="width: 100%;  border-radius: 20rpx;"/>
		</view>
<!-- 		<view class="info-picture">
			<image :src="info.picture_url" style="width: 100%;  border-radius: 20rpx;" mode="aspectFill"></image>
		</view> -->
		
		<view class="rili-content black-bg">

			<view class="flex1 justify-between align-center g1 u-m-b-30">
				<view class="u-m-l-0 u-font-24 flex1 align-center">
					<view class="k1 u-m-b-20">画面描述</view>
					<view class="k2" style="border:0;padding-bottom:0">{{info.prompt}}</view>
				</view>
			</view>


			<view class="flex1 justify-between align-center g1 u-m-b-30" >
				<view class="u-m-l-0 u-font-24 flex1 align-center  ">
					<view class="k1 u-m-b-20 u-font-28  u-m-b-30">创作信息</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>创作时间</view>
						<view>{{info.created_at}}</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>模型主题</view>
						<view>{{info.style_model}}</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>风格选择</view>
						<view>仅投票可见</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>画面尺寸</view>
						<view>{{info.size_ratio}}</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>角色同人</view>
						<view>仅投票可见</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>融合模型</view>
						<view>{{info.sampler_model_name}}</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u" style="border:0">
						<view>参考图</view>
						<view>仅投票可见</view>
					</view>
				</view>
			</view>
			<view class="flex1 justify-between align-center g1 u-m-b-30">
				<view class="u-m-l-0 u-font-24 flex1 align-center  ">
					<view class="k1 u-m-b-20 u-font-28  u-m-b-30">技术信息</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view style="flex: none;" class="line-1">链上Hash</view>
						<view class="u-text-right">0x3A6be93394382C2d9b1 EEb81 fE4ce515b45D7238#13</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>作品存证</view>
						<view>查看</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>机器编号</view>
						<view>OgQAsVQdGX</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>显卡</view>
						<view>NVIDIA Tesla V100-PCIE-32GB</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>消耗电量</view>
						<view>0.00065999996度</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24" style="border:0">
						<view>分辨率</view>
						<view>2816*2048</view>
					</view>
					
				</view>
				
			</view>

			<u-popup v-model="shareShow" mode="bottom">
				<view class="share-box">
					<view class="flex justify-between align-center copy-title">
						<view style="text-align: center;width: 100%;">全参数复制</view>
						<view><u-icon name="close" @click="shareShow=false"></u-icon></view>
					</view>
					<view class="copy-box">
						<view>咒语(Prompt):{{info.prompt}}</view>
						<view>Model: <text>{{info.model_desc}}</text> Scale: <text>{{info.model_desc}}</text></view>
						<view>http://localhost:9090/h5/0sdfsf</view>
						<view>一键复制后打开[誉言 APP 或 点击链接 自动填入全部参数进行同款创作</view>
					</view>
				</view>
				<view class="footer-share">
					<view class="flex justify-between align-center flex-wrap footer-share-list">
						<view v-for="(item,index) in shareList" :key="index" class="share-item" @click="shareClick(index)">
							<image :src="item.img" style="width:200rpx; height:80rpx;"></image>
						</view>
					</view>
				</view>
			</u-popup>
			
		</view>
		<view v-if="!shareShow" class="flex justify-between align-center footer-btn">
			
			<view v-if="loadingProgress<100" class="fx flex align-center justify-center" @click="unDone">
				撤销
			</view>
			<view v-else class="fx flex align-center justify-center" @click="allCopy">
				全参数复制
			</view>
			<view v-if="loadingProgress<100" class="fx2" @click="accelerate">
				加速生成
			</view>
			<view v-else class="fx2" @click="toSecond">
				再来一张
			</view>
		</view>
	</view>
</template>

<script>	
	export default{
		data(){
			return{
				isUndone: false,
				isMake: false,
				shareShow: false,
				active:1,
				id:'',
				info:{},
				note:{},
				limist:10,
				page :1,
				dataOne:[],
				QRcode: '',
				imageSrc: '',
				loadingProgress: 100,
				shareImg: '/static/images/share-bg.png',
				shareList:[
					{name: '微信好友', img: '/static/images/cc1.png'},
					{name: 'QQ好友', img: '/static/images/cc2.png'},
					{name: '复制参数', img: '/static/images/cc3.png'}
				],
				timer: null,
				initTime: 1000
			}
		},
		mounted() {
			if(this.isMake){
				this.loadingProgress = 0
				this.startTimer();
			}
		},
		onLoad(data) {
			this.id = data.id ||''
			this.isMake = data.is_make
			this.loadData()
		},
		onReachBottom() {
			
		},
		methods:{
			tab(num){
				this.active = num
			},
			loadData(){
				this.$u.api.aiopusdetail({
					draw_id: this.id
				}).then(res=>{
					this.info = res.data
					if(res.data.picture_url != ''){
						this.imageSrc = res.data.picture_url
						this.loadingProgress = 100
					}
					else{
						this.loadingProgress = 0
					}
				})
			},
			allCopy() {
				this.shareShow = true
			},
			copy(data){
				uni.setClipboardData({
					data
				})
			},
			uniShare() {
				this.shareShow = true
			},
			shareClick (index) {
				console.log(index)
				if(index == 0){
					
				}
				else if(index == 1){
					
				}
				else if(index == 2){
					this.txt(this.info.prompt)
				}
			},
			txt(data){
				uni.setClipboardData({
					data: data,
					success: function () {
						uni.showToast({
							title:"复制成功",
							icon:"none"
						})
					}
				});
				// this.imgShow = false
			},
			startTimer() {
				this.timer = setInterval(() => {
					// this.loadingProgress += 1
					
					if(this.loadingProgress == 0){
						this.requestApi();
						this.loadingProgress += 2
					}
					else if (this.loadingProgress == 98){
						this.requestApi();
					}
					else{
						this.loadingProgress += 2
					}
					
				}, this.initTime);
			},
			unDone(){
				clearInterval(this.timer)
				this.isUndone = true
				// uni.showToast({
				// 	title:"已撤销,积分已退还",
				// 	icon:"none"
				// })
				
				// let self = this
				// this.$u.api.accelerate({
				// 	draw_id: this.id
				// }).then(res=>{
				// 	self.loadingProgress = 98;
					
					
				// })
				
			},
			toSecond(){
				uni.reLaunch({
					url: '/pages/tabbar/bazaar/bazaar-second?id=' + this.id
				})
			},
			requestApi() {
				if(this.id == ''){
					return false
				}
				const self = this;
				let ids = [];
				ids.push(this.id)
				
				this.$u.api.check({
					ids: ids
				}).then(res=>{
					let info = res.data[0]
					if(info.status == 4){
						self.loadingProgress = 100;
						self.imageSrc = info.picture_url
						clearInterval(self.timer);
					}
					else{
						// if(self.loadingProgress < 90){
						// 	// self.loadingProgress += 10;
						// }
					}
					
				})

			},
			accelerate() {
				let that = this
				this.$u.api.accelerate({
					draw_id: that.id
				}).then(res=>{
					// if(res.status == 'error'){
					// 	uni.showToast({
					// 		title:res.message,
					// 		icon:"none"
					// 	})
					// 	this.loadingProgress = 100;
					// }
						
					// else{
					// 	this.requestApi();
					// }
					// that.requestApi();
					uni.showToast({
						title:res.message,
						icon:"none"
					})
					
					
				})
				
				this.loadingProgress = 98;
				// that.requestApi();
			}
		}
	}
</script>

<style lang="scss">
.fx{
	width: 336rpx;
	height: 90rpx;
	text-align: center;
	line-height: 90rpx;
	border: 1px solid #efefef;
	font-size: 28rpx;
	font-family: PingFang SC-Semibold, PingFang SC;
	font-weight: 600;
	color: #ffffff;
	line-height: 33rpx;
	border-radius: 20rpx;
}
.fx2{
	font-size: 28rpx;
	font-family: PingFang SC-Semibold, PingFang SC;
	font-weight: 600;
	color: #ffffff;
	line-height: 33rpx;
	border: 1px solid #efefef;
	border-radius: 20rpx;
	width: 336rpx;
	height: 90rpx;
	text-align: center;
	line-height: 90rpx;
}
.g2 view{
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: rgba(255,255,255,0.6);
	line-height: 33rpx;
	background: #262626;
	border: 1px solid #262626;
	width: 49%;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	border-radius: 78rpx;
}
.g2 view.active{
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	line-height: 33rpx;
	background: #262626;
	border: 1px solid #CAFD5C;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	border-radius: 78rpx;
}
.k1{
	font-size: 28rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255,255,255,0.8);
line-height: 33rpx;
}
.k2{
	font-size: 24rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255,255,255,0.6);
line-height: 30rpx;
padding-bottom: 20rpx;
border-bottom: 1px solid #494949; 
}
.g1{background: #1e1e1e;border-radius: 20rpx;padding: 34rpx;box-sizing: border-box;}
.one .item{
	background: #262626;
	border-radius: 20rpx;
	overflow: hidden;
	width: 48%;
}
.one .item image{width: 100%;}
.one .item view:nth-child(2){
	font-size: 28rpx;
	font-family: PingFang SC-Bold, PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 33rpx;
	padding-left: 18rpx;
	padding-top: 18rpx;
	font-weight: normal;
}
.one .item view:nth-child(3){
	border-radius: 25rpx;
	border: 1px solid #CAFD5C;
	font-size: 24rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #CAFD5C;
	line-height: 28rpx;
	margin-top: 26rpx;
	text-align: center;
	height: 50rpx;
	line-height: 50rpx;
 
	margin-bottom: 24rpx;
	width: 92%;
	margin-left: auto;
	margin-right: auto;
}
.btn1{
	background: #262626;
	color: #fff;
	font-size: 24rpx;
	padding: 5px 8px;
	border-radius: 35rpx;
	margin-right: 24rpx;
	border: 1px solid #262626;
}
.btn1.active{
	border: 1px solid #CAFD5C;
	color: #fff;
}
.btn0{
	background: #cafd5c;
	color: #fff;
	border-radius: 25rpx;
	font-size: 24rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #000000;
	line-height: 28rpx;
	padding: 5px 16px;
}
	.flex10{
		border-bottom: 0px solid rgba(255,255,255,.2);
		padding-bottom: 24rpx;
	}
	.info-picture {
		padding: 0 30rpx;
	}
	.rili-top{
		margin-left: auto;
		margin-right: auto;
		display: block;
		border-radius: 20rpx;
	}

	.rili-content{
		position: relative;
		z-index: 10;
		padding:30rpx 32rpx 20rpx 32rpx;
		border-radius: 66rpx;
		.rili-avatar{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}
		.rili-line{
			height: 1rpx;
			margin: 40rpx 0 50rpx 0;
		}
		.rili-tag{
			display: inline-block;
			height: 40rpx;
			line-height: 40rpx;
			padding: 0 16rpx;
			background: linear-gradient(90deg, #04D5A3 0%, #00E2E2 100%);
			border-radius: 20rpx 8rpx 20rpx 8rpx;
		}
		.rili-card{
			width: 308rpx;
			height: 132rpx;
			border-radius: 20rpx;
			padding-left: 40rpx;
		}
	}
	::v-deep .uni-scroll-view, .uni-scroll-view-content {
		background-color: #242424;
	}
	::v-deep .u-drawer__scroll-view {
		height: auto;
	}
	.black-bg {
		margin-bottom: 90rpx;
	}
	.share-box{

		color: #ffffff;
		z-index: 9999;

		.copy-title {
			padding: 30rpx 30rpx;
		}

		.copy-box {
			margin: 10rpx 30rpx 200rpx 30rpx;
			padding: 30rpx;
			background-color: #1f1f1f;
			border: solid 2rpx #343627;
			border-radius: 20rpx;
		}
		
	}

	.footer-btn {
		position: fixed;
		width: 100%;
		bottom: 0px;
		padding: 30rpx 30rpx;
		background-color: #000000;
		z-index: 99;
	}

	.footer-share{
		position: fixed;
		bottom: 0px;
		width: 100%;
		z-index: 9999;
		.footer-share-title{
			text-align: center;
		}
		.footer-share-list{
			padding: 50rpx;
			.share-item{
				text-align: center;
			}
		}
	}
	
	.image-container {
		min-height: 400rpx;
		position: relative;
		margin: 0 30rpx;
		border-radius: 20rpx;
		background-color: #1e1e1e;
	}
	
	.progress {
		position: absolute;
		width: 100%;
		padding: 0 30%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		.progress-text {
			text-align: center;
			text {
				padding-left: 10rpx;
				color: #caf45c;
			}
		}
		
		.progress-bg{
			background-color: #3e3e3e;
		}
		.progress-bar {
			margin-top: 20rpx;
			height: 10rpx;
			background-color: #caf45c;
			transition: width 0.3s ease-in-out;
		}
		
	}
	.progress-un {
		position: absolute;
		width: 100%;
		padding: 0 30%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}
	
	.responsive-image {
	  width: 100%;
	  height: auto;
	}
</style>